/* eslint-disable eqeqeq */
import { Empty, SearchBar } from "antd-mobile";
import React, { useState } from "react";
import { stopList } from "../API/busAPI";
import Header from "../../Header";

export default function StopQuery() {
  const [list, setList]: any = useState([]);
  const [total, setTotal] = useState();

  const onSearch = async (value: any) => {
    console.log(value);
    let res = await stopList({ linesId: value });
    console.log(res);
    if (res.data.code == 200) {
      setList(res.data.rows);
      setTotal(res.data.total);
    }
  };

  return (
    <div>
      <Header title="站点"></Header>
      <div className="xz-content">
        <SearchBar
          placeholder="查询站点 ,请输入1-4之间的数"
          onSearch={onSearch}
        />
        {list.length ? (
          <div>
            <div>站点总数：{total}</div>
            {list.map((item: any) => {
              return (
                <div className="xz-feed" key={item.sequence}>
                  <div className="feed-left">{item.name}</div>
                  <div className="feed-right">
                    <div>站点顺序：{item.sequence}</div>
                    <div>路线ID：{item.linesId}</div>
                    <div>站点ID：{item.stepsId}</div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <Empty
            className="feed"
            style={{ padding: "30vh 0" }}
            imageStyle={{ width: 128 }}
            description="暂无数据"
          />
        )}
      </div>
    </div>
  );
}
